<!-- 表单交互（双向绑定）  -->

<script setup>
    
    import { ref } from 'vue';
    let username1 =ref("");
    let username2 =ref("");
    let username3 =ref("");
    let username4 =ref("");

    let info  =ref("info");

    let flag  = ref(true);
    let flag2  = ref();

    let hobbys =ref([ "yx", "yj" ]);

    let sex =ref("man");
    let city =ref("xm");

    let citys =ref();


    let citys2 =ref();
    let cityArr =ref([
        {text:"厦门",value:"xm"},
        {text:"泉州",value:"qz"},
        {text:"漳州",value:"zz"}

    ]);

    //  设计一个  用户注册：
    // 动态数据 ： 对象 {userid:xxx,username:xxx,hobbys:[xxx,x,x,x,x]}  怎么实现？



</script>

<template>
    {{ username1 }}<br/>

    账号：<input type="text" v-model="username1"/><br/>
    <!-- change 级别的 改变一下 就响应一下  .lazy 懒执行  相当于 onblur  -->
    {{ username2 }}<br/>
    lazy:<input type="text" v-model.lazy="username2"/><br/>
    {{ username3 }}<br/>
    number:<input type="text" v-model.number="username3"/><br/>

    {{ info }}
    <hr/>
    详情：<textarea v-model="info"></textarea><br/>
    <hr/>
    {{ hobbys }}<br/>
    爱好：  
    <input type="checkbox" v-model="hobbys" value="yy"/>游泳
    <input type="checkbox" v-model="hobbys"  value="yx"/>游戏
    <input type="checkbox" v-model="hobbys"  value="yj"/>游金
    <br/>
    <hr/>

    {{  sex }}<br/>

    性别： <input type="radio" v-model="sex" value="man">男 <input type="radio" v-model="sex" value="woman">女  <br/>
    <hr/>
    {{ city }}<br/>
    城市：<select v-model="city">
        <option value="xm">厦门</option>
        <option value="qz">泉州</option>
        <option value="zz">漳州</option>
    </select>
    <br/>

    {{ citys }}<br/>
    城市(多选):<select v-model="citys" multiple>
        <option value="xm">厦门</option>
        <option value="qz">泉州</option>
        <option value="zz">漳州</option>
    </select>
    <br/>

    {{ citys2 }}<br/>
    城市(多选 动态反显下拉框):
    <select v-model="citys2" multiple>
    
        <option v-for="city in cityArr " :value="city.value">
            {{ city.text }}
        </option>

    </select>
 <br/>
    
</template>


